<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home</title>
    <!-- Bootstrap Styles-->
    <link href="assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="assets/css/font-awesome.css" rel="stylesheet" />
    <!-- Morris Chart Styles-->
    <link href="assets/js/morris/morris-0.4.3.min.css" rel="stylesheet" />
    <!-- Custom Styles-->
    <link href="assets/css/custom-styles.css" rel="stylesheet" />
    <!-- Google Fonts-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- jQuery Js -->
    <script src="assets/js/jquery-1.10.2.js"></script>
    <!-- Bootstrap Js -->
    <script src="assets/js/bootstrap.min.js"></script>

    <!-- Metis Menu Js -->
    <script src="assets/js/jquery.metisMenu.js"></script>
    <!-- Morris Chart Js -->
    <script src="assets/js/morris/raphael-2.1.0.min.js"></script>
    <script src="assets/js/morris/morris.js"></script>


    <script src="assets/js/easypiechart.js"></script>
    <script src="assets/js/easypiechart-data.js"></script>


    <!-- Custom Js -->
    <script src="assets/js/custom-scripts.js"></script>
    <script src="assets/js/echarts.min.js"></script>
    <script src="assets/js/china.js"></script>

</head>

<body>
<div id="wrapper">
    <nav class="navbar navbar-default top-navbar" role="navigation">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#"><i class="fa fa-comments"></i> <strong>尚硅谷可视化平台</strong></a>
        </div>

        <ul class="nav navbar-top-links navbar-right">

        </ul>
    </nav>
    <!--/. NAV TOP  -->
    <nav class="navbar-default navbar-side" role="navigation">
        <div id="sideNav" href=""><i class="fa fa-caret-right"></i></div>
        <div class="sidebar-collapse">
            <ul class="nav" id="main-menu">
                <script></script>
                <li>
                    <a href="#"><i class="fa fa-dashboard"></i>系统统计<span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li>
                            <a class="active-menu" href="index"><i class="fa fa-dashboard"></i>每日统计</a>
                        </li>
                        <li>
                            <a href="table"><i class="fa fa-table"></i>数据展示</a>
                        </li>
                        <li>
                            <a href="map"><i class="fa fa-edit"></i>地图展示</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="ui-elements.html"><i class="fa fa-desktop"></i>在线教育统计</a>
                </li>

            </ul>

        </div>

    </nav>
    <!-- /. NAV SIDE  -->
    <div id="page-wrapper">
        <div id="page-inner">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default">
                        <div class="panel-body">
                            <div id="main" style="width: 1100px;height:700px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /. WRAPPER  -->
<!-- JS Scripts-->
<script type="text/javascript">


    function randomData() {
        return Math.round(Math.random()*500);
    }
    var mydata = [
        {name: '北京',value: ' ' },{name: '天津',value: randomData() },
        {name: '上海',value: randomData() },{name: '重庆',value: randomData() },
        {name: '河北',value: randomData() },{name: '河南',value: randomData() },
        {name: '云南',value: randomData() },{name: '辽宁',value: randomData() },
        {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() },
        {name: '安徽',value: randomData() },{name: '山东',value: randomData() },
        {name: '新疆',value: randomData() },{name: '江苏',value: randomData() },
        {name: '浙江',value: randomData() },{name: '江西',value: randomData() },
        {name: '湖北',value: randomData() },{name: '广西',value: randomData() },
        {name: '甘肃',value: randomData() },{name: '山西',value: randomData() },
        {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() },
        {name: '吉林',value: randomData() },{name: '福建',value: randomData() },
        {name: '贵州',value: randomData() },{name: '广东',value: randomData() },
        {name: '青海',value: randomData() },{name: '西藏',value: randomData() },
        {name: '四川',value: randomData() },{name: '宁夏',value: randomData() },
        {name: '海南',value: randomData() },{name: '台湾',value: randomData() },
        {name: '香港',value: randomData() },{name: '澳门',value: randomData() }
    ];
    /*var mydata = [];
    $.ajax({
        type : "get",
        async : false,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
        url : "getChinaOrderData",    //请求发送到TestServlet处
        data : {},
        dataType : "text",        //返回数据形式为json
        success : function(result) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            //alert(result)
            var data = eval('(' + result + ')');

            if (data) {
                mydata = data;
            }

        }
    });*/
    //myChart.showLoading();
    var optionMap = {
        backgroundColor: '#FFFFFF',
        title: {
            text: '全国商品销量',
            subtext: '',
            x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                //alert(params.name);
                var res = params.name+'<br/>';
                //alert(res);
                var myseries = optionMap.series;

                for (var i = 0; i < myseries.length; i++) {
                    for(var j=0;j<myseries[i].data.length;j++){
                        if(myseries[i].data[j].name==params.name){
                            res+=myseries[i].name +' : '+myseries[i].data[j].value+'</br>';
                        }
                    }
                }
                //alert(res)
                return res;
            }
        },
        //左侧小导航图标
        visualMap: {
            show : true,
            x: 'left',
            y: 'center',
            splitList: [
                {start: 500, end:600},{start: 400, end: 500},
                {start: 300, end: 400},{start: 200, end: 300},
                {start: 100, end: 200},{start: 0, end: 100},
            ],
            color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
        },

        //配置属性
        series: [{
            name: '销量top',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: false
                }
            },
            data:mydata  //数据
        },{
            name: '销量top1',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: false
                }
            },
            data:mydata  //数据
        },{
            name: '销量top2',
            type: 'map',
            mapType: 'china',
            roam: true,
            label: {
                normal: {
                    show: true  //省份名称
                },
                emphasis: {
                    show: false
                }
            },
            data:mydata  //数据
        }]
    };
    var myChart = echarts.init(document.getElementById('main'));
    myChart.setOption(optionMap);
    /*$.get('asset/geo/china.json', function (chinaJson) {
        myChart.hideLoading();

        echarts.registerMap('CH', chinaJson);
        option = {
            title: {
                text: 'USA Population Estimates (2012)',
                subtext: 'Data from www.census.gov',
                sublink: 'http://www.census.gov/popest/data/datasets.html',
                left: 'right'
            },
            tooltip: {
                trigger: 'item',
                showDelay: 0,
                transitionDuration: 0.2,
                formatter: function (params) {
                    var value = (params.value + '').split('.');
                    value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
                    return params.seriesName + '<br/>' + params.name + ': ' + value;
                }
            },
            visualMap: {
                left: 'right',
                min: 500000,
                max: 38000000,
                inRange: {
                    color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
                },
                text:['High','Low'],           // 文本，默认为数值文本
                calculable: true
            },
            toolbox: {
                show: true,
                //orient: 'vertical',
                left: 'left',
                top: 'top',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: 'USA PopEstimates',
                    type: 'map',
                    roam: true,
                    map: 'USA',
                    itemStyle:{
                        emphasis:{label:{show:true}}
                    },
                    // 文本位置修正
                    textFixed: {
                        Alaska: [20, -20]
                    },
                    data:[
                        {name: 'Alabama', value: 4822023},
                        {name: 'Alaska', value: 731449},
                        {name: 'Arizona', value: 6553255},
                        {name: 'Arkansas', value: 2949131},
                        {name: 'California', value: 38041430},
                        {name: 'Colorado', value: 5187582},
                        {name: 'Connecticut', value: 3590347},
                        {name: 'Delaware', value: 917092},
                        {name: 'District of Columbia', value: 632323},
                        {name: 'Florida', value: 19317568},
                        {name: 'Georgia', value: 9919945},
                        {name: 'Hawaii', value: 1392313},
                        {name: 'Idaho', value: 1595728},
                        {name: 'Illinois', value: 12875255},
                        {name: 'Indiana', value: 6537334},
                        {name: 'Iowa', value: 3074186},
                        {name: 'Kansas', value: 2885905},
                        {name: 'Kentucky', value: 4380415},
                        {name: 'Louisiana', value: 4601893},
                        {name: 'Maine', value: 1329192},
                        {name: 'Maryland', value: 5884563},
                        {name: 'Massachusetts', value: 6646144},
                        {name: 'Michigan', value: 9883360},
                        {name: 'Minnesota', value: 5379139},
                        {name: 'Mississippi', value: 2984926},
                        {name: 'Missouri', value: 6021988},
                        {name: 'Montana', value: 1005141},
                        {name: 'Nebraska', value: 1855525},
                        {name: 'Nevada', value: 2758931},
                        {name: 'New Hampshire', value: 1320718},
                        {name: 'New Jersey', value: 8864590},
                        {name: 'New Mexico', value: 2085538},
                        {name: 'New York', value: 19570261},
                        {name: 'North Carolina', value: 9752073},
                        {name: 'North Dakota', value: 699628},
                        {name: 'Ohio', value: 11544225},
                        {name: 'Oklahoma', value: 3814820},
                        {name: 'Oregon', value: 3899353},
                        {name: 'Pennsylvania', value: 12763536},
                        {name: 'Rhode Island', value: 1050292},
                        {name: 'South Carolina', value: 4723723},
                        {name: 'South Dakota', value: 833354},
                        {name: 'Tennessee', value: 6456243},
                        {name: 'Texas', value: 26059203},
                        {name: 'Utah', value: 2855287},
                        {name: 'Vermont', value: 626011},
                        {name: 'Virginia', value: 8185867},
                        {name: 'Washington', value: 6897012},
                        {name: 'West Virginia', value: 1855413},
                        {name: 'Wisconsin', value: 5726398},
                        {name: 'Wyoming', value: 576412},
                        {name: 'Puerto Rico', value: 3667084}
                    ]
                }
            ]
        };

        myChart.setOption(option);
    });*/
</script>

</body>

</html>